<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-form ref="form" :inline="true" label-width="auto">
          <el-input
            v-model="query.name"
            placeholder="请输入任务名称"
            clearable
            size="small"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery"
          />
          <el-select v-model="query.status" style="width: 200px;" placeholder="请选择打包状态" class="filter-item" clearable>
            <el-option v-for="val in statusList" :key="val" :label="val" :value="val" />
          </el-select>
          <rrOperation :crud="crud" />
        </el-form>
      </div>
      <crudOperation show="" :permission="permission" />

    </div>
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="1000px"
    >
      <el-form ref="form" :inline="true">
        <el-row>
          <el-col :span="4">
            <div style="height: 300px;">
              <el-steps direction="vertical" :active="active">
                <el-step title="基础信息" />
                <el-step title="脚本检查" />
              </el-steps>
            </div>
          </el-col>
          <el-col :span="20">
            <div v-if="active===1">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="任务编号" prop="moduleName">
                    <el-input v-model="form.moduleName" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="12 ">
                  <el-form-item label="任务名称" prop="compareType">
                    <el-input v-model="form.compareType" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="脚本选择">
                    <el-radio-group v-model="form.change">
                      <el-radio-button label="1">直连</el-radio-button>
                      <el-radio-button label="2">导入</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item v-if="form.change=='1'">
                    <el-button class="bordered-button" size="medium" type="text" @click="dialogShow = true">
                      展示当前库下最新的脚本清单
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item v-if="form.change=='2'" label="文件上传">
                    <el-upload
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :limit="3"
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                    >
                      <el-button size="small" type="primary">点击上传</el-button>
                      <template #tip>
                        <div class="el-upload__tip">只能上传 xlsx,xls 文件，且不超过 500kb</div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-button type="primary">删除</el-button>
              <el-table :data="testList" height="250">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="type" label="序号" width="100" />
                <el-table-column prop="type" label="脚本名称" width="400" />
              </el-table>
            </div>

            <div v-if="active===2">
              <el-form-item label="脚本检查">
                <el-radio-group v-model="form.change">
                  <el-radio-button label="1">是</el-radio-button>
                  <el-radio-button label="2">否</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
                <el-form-item label="投产验证" label-width="70px" />
                <el-table :data="tableList" height="250">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="types" label="脚本名称" />
                  <el-table-column prop="types" label="投产路径" />
                  <el-table-column label="操作状态">
                    <el-button size="mini" type="text" @click="add">新增</el-button>
                    <el-button size="mini" type="text" @click="edit">修改</el-button>
                  </el-table-column>
                  <el-table-column prop="types" label="脚本预览" />
                  <el-table-column label="验证结果">
                    <el-button size="mini" type="text" @click="dialogTableVisible = true">详情</el-button>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div v-show="active == '1'">
              <data-trans-list :table-trans-task-pk-id="tableTransTaskPkId" />
              <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 80px">
                <el-button @click="active++">下一步</el-button>
                <el-button type="info" @click="crud.cancelCU">取消</el-button>
              </div>
            </div>
            <div v-show="active == '2'">
              <data-trans-list :table-trans-task-pk-id="tableTransTaskPkId" />
              <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 30px">
                <el-button @click="active--">上一步</el-button>
                <el-button type="info" @click="crud.cancelCU">取消</el-button>
                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-table ref="table" :data="tableList" style="width: 100%;" @select="handleSelection">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="任务名称" />
      <el-table-column prop="inspect" label="验证结果" width="190" />
      <el-table-column prop="result" label="打包状态" width="110" />
      <el-table-column prop="start" label="打包开始时间" width="170" />
      <el-table-column prop="end" label="打包结束时间" width="170" />
      <el-table-column label="详情">
        <template>
          <el-button size="mini" type="text" @click="packFlag=true">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="1" />
    <el-dialog :visible.sync="packFlag" :modal-append-to-body="false" :close-on-click-modal="true">
      <el-table>
        <el-table-column property="type" label="文件名称" />
        <el-table-column property="type" label="文件路径" />
        <el-table-column property="type" label="操作状态" />
        <el-table-column property="type" label="备注" />
        <el-table-column property="type" label="文件预览" />
      </el-table>
      <pagination :total="0" />
      <div slot="footer" class="dialog-footer">
        <el-button type="text" style="margin-right : 10px" @click="packFlag=false">取消</el-button>
        <el-button type="primary" @click="packFlag=false">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogShow" :modal-append-to-body="false" :close-on-click-modal="true" width="700px">
      <div>
        <el-transfer
          v-model="value"
          filterable
          :titles="['未确认对比表清单', '已确认对比表清单']"
          :props="{
            key: 'value',
            label: 'desc'
          }"
          :data="data"
        />
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
        <el-button type="primary" style="margin-right: 80px" @click="dialogShow=false">同意</el-button>
        <el-button type="text" @click="dialogShow=false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogTableVisible" :modal-append-to-body="false" :close-on-click-modal="true">
      <el-table>
        <el-table-column property="type" label="脚本名称" />
        <el-table-column property="type" label="血源表名" />
        <el-table-column property="type" label="字段数验证" />
        <el-table-column property="type" label="字段名" />
        <el-table-column property="type" label="字段类型" />
        <el-table-column property="type" label="操作" />
      </el-table>
      <pagination :total="0" />
      <div slot="footer" class="dialog-footer">
        <el-button type="text" style="margin-right : 10px" @click="dialogTableVisible=false">取消</el-button>
        <el-button type="primary" @click="dialogTableVisible=false">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
// import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultCrud = CRUD({
  title: '打包',
  url: ''
})
export default {
  components: { crudOperation, rrOperation, pagination },
  mixins: [presenter(defaultCrud), header(), crud()],
  data() {
    return {
      dialogTableVisible: false,
      fileList: [],
      active: 1,
      dialogShow: false,
      statusList: ['已完成', '打包中'],
      tableList: [
        {
          id: '1',
          name: '打包任务名称',
          inspect: '总数100，成功50，失败50',
          result: '已完成/未完成',
          start: '2023-07-12 09：09：09',
          end: '2023-07-12 10：09：09'
        }
      ],
      permission: {
        add: ['admin', 'package:add'],
        edit: ['admin', 'package:edit'],
        del: ['admin', 'package:del']
      },
      form: {
        change: '1',
        router: ''
      },
      packFlag: false
    }
  },
  methods: {
    handleSelection(ids) {
      this.crud.selections = ids
    },
    add() {
      this.$prompt('请输入脚本名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.$message({
          type: 'success'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    edit() {
      this.$prompt('请输入修改的脚本名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.$message({
          type: 'success'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-input{
  width: 120px;
}
</style>
